<template>
	<view class="layout">
		<view class="add" @click="add">
			<uni-icons type="plusempty" size="30"></uni-icons>
			
		</view>
		
		<view class="list">
			<uni-card title="2024-10-20" extra="" v-for="(item,index) in 8" :key="index">
			
					<view class="row">
						<view class="left">
							人员
						</view>
						<view class="right">
							刘德华
						</view>
					</view>
					
					<view class="row">
						<view class="left">
							地点
						</view>
						<view class="right">
							科教楼2楼211室
						</view>
					</view>
					
					
					<view class="row">
						<view class="left">
							沟通类型
						</view>
						<view class="right">
							电话沟通
						</view>
					</view>
					
					<uni-collapse>
						<uni-collapse-item title="沟通内容">
											<view class="content">
												这是一段比较长内容 沟通内容
											</view>
						</uni-collapse-item>
					</uni-collapse>
			
			</uni-card>
		</view>
		
		<!-- 添加弹框 -->
		<uni-popup ref='addPopup' type='bottom':safe-area="false" >
			<view class="addPopup">
				<view class="popheader">
					<view></view>
					<view class="title">新增</view>
					<view class="close" @click="closeGT">X</view>
				</view>
				
				<scroll-view scroll-y>
						<view class="content">
								<view class="rows">
									<view class="left">
										<view class="star">
											*
										</view>
										<view class="text">
											人员
										</view>
									</view>
									<view class="right">
										<input class="uni-input" name="student" placeholder="输入姓名" :value="student"/>
												
									</view>
								</view>
								
								<view class="rows">
									<view class="left">
										<view class="star">
											*
										</view>
										<view class="text">
											地点
										</view>
									</view>
									<view class="right">
										<input class="uni-input" name="address" placeholder="输入地点" :value="address"/>
												
									</view>
								</view>
									
								<view class="rows">
									<view class="left">
										<view class="star">
											
										</view>
										<view class="text">
											沟通方式
										</view>
									</view>
									<view class="right">
										<picker @change="communicateChange" :value="communicateIndex" :range="communicateArray" name="communicate">
											<view class="uni-input">{{communicateArray[communicateIndex]}}</view>
										</picker>
										<uni-icons type="forward" size="16"></uni-icons>
												
									</view>
								</view>
								
								<view class="rowsText">
									<view class="uni-title uni-common-pl">内容</view>
												<view class="uni-textarea">
													<textarea placeholder-style="color:#F76260" placeholder="输入内容" name="reward" :value="reward"/>
												</view>
								</view>
								
										
								<button class="but" @click="">确认新增</button>
										
							 <view class="safe-area-shop">
							 	
							 </view>
							<view class="safe-area-inset-bottom">
								
							</view>
							
						</view>
				</scroll-view>
			
			</view>
		</uni-popup>
		<!-- 添加弹框结束 -->
	</view>
</template>

<script setup>
import { ref } from 'vue';
const addPopup = ref(null);//添加弹框
const communicateArray = ref(['请选择','电话','微信','面谈']);//沟通方式
const communicateIndex = ref(0);
const student          = ref('');//人员
const address          = ref('');//地址
const reward           = ref('');//内容

const add = ()=>{
	addPopup.value.open();
}

const communicateChange = (e)=>{
	communicateIndex.value = e.detail.value;
}

const closeGT = ()=>{
	addPopup.value.close();
}

</script>

<style lang='scss' scoped>
	 .layout{
		 padding: 20rpx 30rpx;
		 
		 
			 .row{
			 				  display: flex;
			 				  justify-content: space-between;
			 				  .left{
			 					  
			 				  }
			 				  
			 				  .right{
			 					 font-weight:600;
			 					 color: $xx-color-body;
			 				  }
			 }
			 
			 .add{
				 padding: 0 10rpx;
			 }
			  
		    .addPopup{
		    	position: relative;
		    	background:#fff;
		    	padding: 30rpx;
		    	border-radius: 30rpx 30rpx 0 0;
		    	overflow: hidden;
		    	width:100vw;
		    	
		    	scroll-view{
		    		max-height: 60vh;
		    	}
				.popheader{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title{
						color:$xx-color-body;
						font-size: 28rpx;
					}
					.close{
						padding: 4rpx;
					}
				}
		    	
		    	.content{
		    			
					.rows{
						display: flex;
						justify-content: space-between;
						font-size: 26rpx;
						line-height: 60rpx;
						border-bottom: 1rpx solid #ccc;
						margin-bottom: 20rpx;
						.left{
							display: flex;
							justify-content: space-between;
							.star{
								color:red;
							}
						}
						.right{
							display: flex;
							justify-content: space-between;
							align-items: center;
							text-align: right;
							color:$xx-color-body;
						}
					}
					
					.rowsText{
						padding: 30rpx 0;
							.uni-title{
								
								font-size: 26rpx;
							}
							.uni-textarea{
								border: 1rpx solid $xx-color-body;
							}
					}
					
					.but{
								width: 500rpx;
								height: 80rpx;
								border-radius: 40rpx;
								background: $xx-color-body;
								color: #fff;
					}
					button::after{ border: none;}
					button{
						line-height:80rpx;
					}      			
								
		    		
		    	}
		    }
		 
	 }      
</style>
